<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:p="http://primefaces.org/ui"
	template="/templates/masterLayout.xhtml">

	<ui:define name="pageTitle">#{out.materials_title}</ui:define>
	<ui:define name="header"> -> #{out.materials_title}</ui:define>

	<ui:define name="head-extra">
		<!-- custom css -->
	</ui:define>

	<ui:define name="content">

		<h:form id="materialForm">
			<p:growl id="msgs" for="msgs" showDetail="true" autoUpdate="true"/>
			<p:dataTable var="currentMaterial"
				value="#{materialBean.materialModel}" selectionMode="single"
				selection="#{materialController.selectedMaterial}"
				rowKey="#{currentMaterial.id}" paginator="true" rows="10"
				paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
				rowsPerPageTemplate="5,10,15" id="materialTable" lazy="true"
                                emptyMessage="#{out.empty_message}">
				<p:ajax event="rowSelect"
					listener="#{materialController.onRowSelect}"
					update=":materialForm:msgs,:materialCommandsForm,:editMaterialDialog" />
				<p:ajax event="rowUnselect"
					listener="#{materialController.onRowUnselect}"
					update=":materialForm:msgs,:materialCommandsForm" />
				<p:column headerText="#{out.materials_table_name}"
					sortBy="#{currentMaterial.materialName}"
					filterBy="#{currentMaterial.materialName}">
					<h:outputText value="#{currentMaterial.materialName}" />
				</p:column>
				<p:column headerText="#{out.materials_table_cost}"
					sortBy="#{currentMaterial.cost}">
					<h:outputText value="#{currentMaterial.cost}" />
				</p:column>
			</p:dataTable>
		</h:form>

		<p:dialog id="editMaterialDialog" header="#{out.materials_edit_header}"
			widgetVar="dlg_edit" modal="true" resizable="false">
			<h:form>
				<p:messages id="messages1" for="msgs1" showDetail="true" autoUpdate="true"
					closable="true" />
				<div class="ui-grid ui-grid-responsive">
					<div class="ui-grid-row">
						<div class="ui-grid-col-6">
							<h:panelGrid columns="2" cellpadding="5">
								<h:outputLabel for="name" value="#{out.materials_table_name}"
									style="font-weight:bold" />
								<p:inputText id="name"
									value="#{materialController.selectedMaterial.materialName}" />
								<h:outputLabel for="cost" value="#{out.materials_table_cost}"
									style="font-weight:bold" />
								<p:inputText id="cost"
									value="#{materialController.selectedMaterial.cost}">
								</p:inputText>
							</h:panelGrid>
							<h:panelGrid columns="2" cellpadding="5">
								<p:commandButton value="#{out.save_changes}"
									update=":materialForm:materialTable" icon="ui-icon-eject"
									actionListener="#{materialController.updateMaterial()}" />
								<p:commandButton update=":selectedMaterialForm" ajax="false"
									validateClient="false" immediate="true"
									action="#{materialController.unselectMaterial()}"
									icon="ui-icon-close" title="Cancel" value="#{out.cancel}"></p:commandButton>
							</h:panelGrid>
						</div>
					</div>
				</div>
			</h:form>
		</p:dialog>

		<p:dialog id="createMaterialDialog" header="#{out.materials_create_header}"
			widgetVar="dlg_create" modal="true" resizable="false">
			<h:form>
				<p:messages id="messages2" for="msgs2" showDetail="true" autoUpdate="true"
					closable="true" />
				<div class="ui-grid ui-grid-responsive">
					<div class="ui-grid-row">
						<div class="ui-grid-col-6">
							<h:panelGrid columns="2" cellpadding="5">
								<h:outputLabel for="name" value="#{out.materials_table_name}"
									style="font-weight:bold" />
								<p:inputText id="name"
									value="#{materialController.newMaterialName}" />
								<h:outputLabel for="cost" value="#{out.materials_table_cost}"
									style="font-weight:bold" />
								<p:inputText id="cost"
									value="#{materialController.newMaterialCost}">
								</p:inputText>
							</h:panelGrid>
							<h:panelGrid columns="2" cellpadding="5">
								<p:commandButton value="#{out.save}"
									update=":materialForm:materialTable" icon="ui-icon-eject"
									actionListener="#{materialController.addMaterial()}" />
								<p:commandButton update=":selectedMaterialForm" ajax="false"
									validateClient="false" immediate="true"
									action="#{materialController.unselectMaterial()}"
									icon="ui-icon-close" title="Cancel" value="#{out.cancel}"></p:commandButton>
							</h:panelGrid>
						</div>
					</div>
				</div>
			</h:form>
		</p:dialog>

		<h:form id="materialCommandsForm">
			<h:panelGrid columns="4" cellpadding="5"
				headerText="#{out.materials_table_details}">
				<p:commandButton update=":materialForm:materialTable"
					action="#{materialController.removeMaterial()}"
					icon="ui-icon-trash" title="Delete"
					value="#{out.materials_table_deleteButton}"
					disabled="#{materialController.selectedMaterial == null}">
				</p:commandButton>
				<p:commandButton icon="ui-icon-arrowrefresh-1-n"
					value="#{out.materials_table_EditButton}" type="button"
					update=":materialForm:msgs" onclick="PF('dlg_edit').show()"
					disabled="#{materialController.selectedMaterial == null}">
				</p:commandButton>
				<p:commandButton icon="ui-icon-arrowrefresh-1-n"
					update=":materialForm:msgs"
					value="#{out.materials_newMaterial_addButton}" type="button"
					onclick="PF('dlg_create').show()">
				</p:commandButton>
			</h:panelGrid>
		</h:form>

	</ui:define>
</ui:composition>